<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层叠性</title>

        <style>
            /* 层叠性：多个选择器可以同时作用于同一个标签，效果叠加*/
            p {
                color: red;
            }
            .spec {
                font-style: italic;
            }
            #para {
                text-decoration: underline;
            }

            /* CSS有严密的处理冲突的规则
               多个选择器对同一标签进行同一种属性进行定义,基础选择器的优先级为 id权重>class权重>标签权重
            */
            p {
                color: red;
            }
            #para {
                color: green;
            }
            .spec {
                color: blue;
            }


            /* 复杂选择器可以通过（id的个数，class的个数，标签的个数）的形式，计算权重 */
            /* 有2个id 0个class 1个标签 */
            #box1 #box2 p {
                color: red;
            }
            /* 有2个id 1个class 0个标签*/
            /* 故该选择器权重最大 */
            #box1 div.box2 #box3 p {
                color: green;
            }
            /* 有0个id 3个class 0个标签*/
            .box1 .box2 .box3 p {
                color: blue;
            }


            /* !important可以提升选择器的权重 */
            /* 权重（0,1,1） */
            .list li {
                color: red;
            }
            /* 权重（0,1，0）*/
            .spec {
                color: blue !important;
            }


        </style>
    </head>
    <body>
        <p id="para" class="spec">我是段落</p>

        <div id="box1" class="box1">
            <div  id="box2" class="box2">
                <div id="box3" class="box3">
                    <p>我是段落</p>
                </div>
            </div>
        </div>

        <ul class="list">
            <li>列表项</li>
            <li class="spec">列表项</li>
            <li class="spec">列表项</li>
            <li>列表项</li>
        </ul>
    </body>
</html>